<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>用户验证</title>
</head>

<body>
<h2>用户验证</h2>
<form id="userForm">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" required><br>
  <label for="email">邮箱:</label>
  <input type="text" id="email" name="email" required><br>    <!--required属性:表单元素不能为空-->
  <input type="submit" value="提交">
</form>
<div id="result"></div>
<script>
  document.getElementById('userForm').addEventListener('submit', function (e) {
    e.preventDefault();

    const user = {
      username: document.getElementById('username').value,
      email: document.getElementById('email').value
    };

    fetch('http://localhost:9999/sb03/validated', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(user)
    })
            .then(response => response.text())
            .then(data => {
              document.getElementById('result').innerHTML = `接口返回: ${data}`;
            })
            .catch(error => {
              document.getElementById('result').innerHTML = `发生错误: ${error}`;
            });
  });
</script>
</body>

</html>